import * as React from 'react';
import { connect } from 'react-redux';
import { Button, Tooltip, Tag, Icon, Card } from 'antd';
import CONFIG from 'constants/config';
import { toggleItemCheck, initSelectedItems } from 'actions/attachment';

import CustomModal from 'components/common/CustomModal';
import LoadableComponent from 'components/common/LoadableComponent';
const LoadableAttachmentIndex = LoadableComponent(() => import('pages/attachment/Index'));

interface PopToSelectProps {
  dispatch: (action: any) => any;
  onOk: () => any;
  onCancel: () => any;
  loading: boolean;
  ownItems: any[];
  selectedItems: any[];
  selectType?: any;
  selectMax?: number;
  title?: string;
}

class PopToSelect extends React.Component<PopToSelectProps> {
  static defaultProps: PopToSelectProps = {
    dispatch: () => {},
    onOk: () => {},
    onCancel: () => {},
    loading: false,
    ownItems: [],
    selectedItems: [],
    selectType: '',
    selectMax: 0,
    title: '',
  };

  componentDidMount() {
    const { dispatch, ownItems } = this.props;
    dispatch(initSelectedItems(ownItems));
  }

  handleTrashItem = (target: any) => {
    this.props.dispatch(toggleItemCheck(target, false));
  };

  renderFooterSelected = () => {
    const { selectedItems, selectType, title } = this.props;
    let attachType = '图片';
    if (selectType === CONFIG.ITEM_AUDIO) {
      attachType = '音频';
    } else if (selectType === CONFIG.ITEM_VIDEO) {
      attachType = '视频';
    }

    return (
      <Card title={title ? title : `选择的${attachType}`} style={{ textAlign: 'left' }}>
        {selectedItems.length > 0 ? (
          selectedItems.map((item: any) => {
            return (
              <Tooltip title={item.description} key={item.id}>
                <Tag key={item.id}>
                  {item.name}&nbsp;&nbsp;
                  <Icon
                    type="cross"
                    onClick={e => {
                      e.stopPropagation();
                      this.handleTrashItem(item);
                    }}
                  />
                </Tag>
              </Tooltip>
            );
          })
        ) : (
          <p className="loading-placeholder">
            <Icon type="frown-o" />&nbsp; 还没有{attachType}哦
          </p>
        )}
      </Card>
    );
  };

  renderFooterActions = () => {
    const { loading, selectedItems, onOk, onCancel } = this.props;
    return (
      <div style={{ margin: 24 }}>
        <Button
          key="back"
          type="ghost"
          size="large"
          onClick={() => {
            onCancel();
          }}>
          取消
        </Button>
        <Button
          key="submit"
          type="primary"
          size="large"
          loading={loading}
          disabled={selectedItems.length === 0}
          onClick={onOk}>
          保存
        </Button>
      </div>
    );
  };

  render() {
    const { selectType, selectMax } = this.props;

    return (
      <CustomModal
        width={1020}
        footer={
          <React.Fragment>
            {this.renderFooterSelected()}
            {this.renderFooterActions()}
          </React.Fragment>
        }>
        <LoadableAttachmentIndex
          doSelect={true}
          selectType={String(selectType)}
          selectMax={selectMax}
        />
      </CustomModal>
    );
  }
}

interface OwnProps {
  onOk: () => any;
  onCancel: () => any;
  ownItems: any[];
  loading: boolean;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { selectedItems } = state.attachment;
  const { onOk, onCancel, loading, ownItems } = ownProps;
  return {
    loading,
    onOk,
    onCancel,
    ownItems,
    selectedItems,
  };
}

export default connect(mapStateToProps)(PopToSelect);
